﻿
<!DOCTYPE html>
<html>
<head>
  <title>Visualizing Social Media</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  
  <script type="text/javascript" src="http://www.google.com/jsapi?hl=en&amp;key=AIzaSyDBwH6p5rr5R8eGRwa1AiiIurWvIUqjbW4"></script>
  <script type="text/javascript">
      /* <![CDATA[ */
      var ge;
      var eventListenerActive;
      google.load("earth", "1");

      function init() {
          google.earth.createInstance('map3d', initCB, failureCB);
      }

      function initCB(instance) {
          ge = instance;
          ge.getWindow().setVisibility(true);

          // add a navigation control
          ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);

          // add some layers
          ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
          ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);

          function eventHandler(event) {
              var text = 'Click:';

              function addToMessage(append1, append2) {
                  text += ' ' + append1 + ': ' + append2 + '\n';
              }

             
              addToMessage('latitude', event.getLatitude());
              addToMessage('longitude', event.getLongitude());
              addToMessage('altKey', event.getAltKey());
              addToMessage('ctrlKey', event.getCtrlKey());
              addToMessage('shiftKey', event.getShiftKey());
              addToMessage('timeStamp', event.getTimeStamp());

              // Prevent default balloon from popping up for marker placemarks
              event.preventDefault();

              // wrap alerts in API callbacks and event handlers
              // in a setTimeout to prevent deadlock in some browsers
              if (eventListenerActive){
                  setTimeout(function () {
                      alert(text);
                  }, 0);
              }
          }
          // listen to the click event on the globe and window
          google.earth.addEventListener(ge.getGlobe(), 'click', eventHandler);

          document.getElementById('installed-plugin-version').innerHTML =
            ge.getPluginVersion().toString();
      }
  
      function enableListener() {
          if (!eventListenerActive) {
              eventListenerActive = true;
          }
      }
  
      function disableListener() {
          if (eventListenerActive) {
              eventListenerActive = false;
          }
      }

      function failureCB(errorCode) {
      }

      /* ]]> */
  </script>
</head>
<body onload="init();">
  <h1>Click on the Map to Identify a Location</h1>
  <dl>
            <dt>Last Modified:</dt><dd>1/22/2013</dd>
      <dt>Installed Plugin Version:</dt><dd id="installed-plugin-version">...</dd>
  </dl>
  <div style="clear: both;"></div>
  
  <div id="ui" style="position: relative;">
    <div id="map3d" style="border: 1px solid silver; width: 500px; height: 500px;"></div>
      <br />
    <div style="position:absolute;">
        
        <input type="button" onclick="enableListener();" value="Identify the Center" />
        <br />
        <br />
        <input type="button" onclick="disableListener();" value="Disable Pinning" />
    </div>
  </div>
</body>
</html>
